<template>
	<view class="flex-col group_1 page_bg">
		<view class="flex-col">
			<text class="text_1">您好，欢迎您给我们反馈产品的使用感受和建议。</text>
			<view class="flex-col group_3">
				<u-form :model="form" ref="uForm" :error-type="['toast']">
					<u-form-item class="input_text" prop="suggestArea">
						<u-input v-model="form.suggestArea" type="textarea" :border="false" :height="400"
							:auto-height="true" placeholder="请填写意见反馈内容" />
					</u-form-item>
					<u-form-item class="input_text" prop="contactInfo">
						<u-input v-model="form.contactInfo" type="text" :border="false"
							placeholder="留下您的联系方式 手机 / QQ邮箱" />
					</u-form-item>
				</u-form>
			</view>
			<text class="text_4">您的联系方式有助于我们沟通解决问题，仅工作人员<br />可见</text>
		</view>
		<view class="flex-col items-center button" @tap="sendFeedBack">
			<text>提交</text>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				form: {
					suggestArea: '', // 意见
					contactInfo: '' // 联系方式
				},
				rules: {
					suggestArea: [{
						required: true,
						message: '请输入意见内容',
						trigger: 'blur'
					}, {
						min: 10,
						message: '意见内容不能少于15个字',
						trigger: 'blur'
					}],
					contactInfo: [{
						required: true,
						message: '请输入正确的联系方式',
						trigger: 'blur'
					}, {
						pattern: /(^1[0-9]{10}$)|(^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$)/g,
						transform(value) {
							return String(value);
						},
						message: '请输入正确的手机号或邮箱'
					}]
				}
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init(options)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {},
			// 提交建议
			sendFeedBack() {
				this.$refs.uForm.validate(valid => {
					if (!valid) return
					uni.vk.callFunction({
						url: 'client/feedback/kh/add',
						data: {
							suggestArea: that.form.suggestArea,
							contactInfo: that.form.contactInfo,
							need_user_info: true,
						},
						success(res) {
							that.$refs.uToast.show({
								title: res.code == 0 ? '提交成功' : '提交失败',
								type: res.code == 0 ? 'success' : 'warning',
							})
							setTimeout(() => {
								if (res.code == 0) {
									that.suggestArea = ''
									that.contactInfo = ''
									vk.navigateTo('/pages/mine/index')
								}
							}, 1500)
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_bg {
		height: 100vh;
		background-color: #F5F5F5;
		padding-top: 20rpx;
	}

	.group_1 {
		padding: 34rpx 30rpx 0;
		flex: 1 1 auto;
		overflow-y: auto;

		.button {
			margin-top: 169rpx;
			padding: 26rpx 0 24rpx;
			color: rgb(255, 255, 255);
			font-size: 32rpx;
			line-height: 38rpx;
			white-space: nowrap;
			background-color: rgb(51, 51, 51);
			border-radius: 44rpx;
		}

		.text_1 {
			color: rgb(51, 51, 51);
			font-size: 28rpx;
			line-height: 34rpx;
			white-space: nowrap;
		}

		.group_3 {
			margin-top: 25rpx;
			color: rgb(204, 204, 204);
			font-size: 28rpx;
			line-height: 34rpx;
			white-space: nowrap;

			.input_text {
				background: #FFFFFF;
				padding: 12rpx 25rpx;
				margin-bottom: 38rpx;
			}
		}

		.text_4 {
			margin-right: 40rpx;
			color: rgb(204, 204, 204);
			font-size: 28rpx;
			line-height: 33rpx;
			text-align: left;
		}
	}
</style>
